/* 8. CUSTOM LAYOUT & TYPOGRAPHY (Daddy bear)
----------------------------------------------------------------------------------------*/
#container {
	padding: 1.618em;
	margin: 0 auto; 
	max-width: 60em;
	}
	
header h2:before, header h2:after { width: 42%; }

h1 { font-size: 4.4em; line-height:1.618em; margin-bottom:0.1em; }
    
h1 span {
  font-family: "proxima-nova-1","proxima-nova-2", arial, helvetica, sans-serif;
  text-transform: uppercase;
  letter-spacing:0.1em;
  font-size:0.382em;
  line-height:3.236em;
  display:block;
  }
  
h1 span:before, h1 span:after {
  content:"";
  border-top:1px solid #333;
  height: 0.1em;
  width: 25%;
  display: block;
  margin-top: 1.618em;
  }
  
h1 span:before { float: left; }  
h1 span:after { float: right; }

ul { margin-left: 0.4em; }
ol { margin-left: 0.4em; }

p.intro {
  font-size: 1.618em;
  line-height:1.4289em;
  max-width: 20em;
  margin-bottom: 1em;
  }

aside {/*Will be in right hand column*/
  float: right;
  clear: right;
  width: 25em;
  /*margin-top:-12.5em; the height of p.intro*/
  /*margin-bottom:13em; Add spacing between asides*/
  height:auto;
  }
  
footer p { max-width: 17.942em; }

.smallOnly {
	display: none;
}

/* 9. CUSTOM LAYOUT & TYPOGRAPHY (Mummy bear)
----------------------------------------------------------------------------------------*/
@media screen and (min-width: 30em) and (max-width: 63.236em) {

#container { width: 30em; }

header h2:before, header h2:after { width: 35%; }

h1 { font-size: 2.618em; line-height: 1.4em; }
h1 span { font-size:0.5em; }
h1 span:before, h1 span:after { width: 0%; }

p.intro {
  font-size: 1.309em;
  margin-bottom: 1em;
  max-width: 33em;
  }
  
aside {
  float: none;
  width: auto;
  height: auto;
  margin: 0 0 2.2em;
  }

.smallOnly {
	display: block;
}
  
}